<template>
  <div class="gameContent">
    <head-info>
      <template #left>
        <div class="left"><i class="fa fa-fire"></i> 热门游戏</div>
      </template>
      <template #right>
        <button class="myBtn">
          <a href="https://0day.ali213.net/" style="color: #fff" target="_blank"
            >查看更多</a
          >
        </button>
      </template>
    </head-info>
    <div class="game-list">
      <el-row>
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="6"
          v-for="(item, index) in homeCard.itemList"
          :key="index"
          ><game-item class="entry-bottom" :gameCard="item"
        /></el-col>
      </el-row>
    </div>
    <game-detail v-if="store.state.showGameDetail" />
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import gameItem from "@/components/home/gameContent/gameItem.vue";
import gameDetail from "@/components/home/gameContent/gameDetail.vue";
import headInfo from "@/components/home/headInfo.vue";
import { getGameHomeCard } from "@/service/youxiaData";
import { useStore } from "vuex";
const store = useStore();
const homeCard = reactive({
  itemList: [],
});
onMounted(() => {
  getGameHomeCardData();
});

const getGameHomeCardData = async () => {
  const res = await getGameHomeCard();
  homeCard.itemList = res.data;
};
</script>

<style scoped lang="less">
.gameContent {
  width: 65%;
  position: relative;
  .myBtn {
    width: 100px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    height: 25px;
    text-align: center;
    border: none;
    background-size: 300% 100%;
    background-image: linear-gradient(
      to right,
      #25aae1,
      #40e495,
      #30dd8a,
      #2bb673
    );
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
    border-radius: 50px;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    &:hover {
      background-position: 100% 0;
      -o-transition: all 0.4s ease-in-out;
      -webkit-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
    }
  }
  .game-list {
    margin-left: 20px;
  }
}
</style>
